<template>
    <view class="recommend mt-32 ph-24">
        <view class="f jc-s-b ai-c">
            <view class="fs-36 fw-600 text-color4">推荐好货</view>
            <view class="f ai-c" @click="toMore">
                <view class="fs-24 text-color3 mr-9"> 更多</view>
                <u-icon name="arrow-right" size="10" color="#999"></u-icon>
            </view>
        </view>
        <view class="f jc-s-b mt-20">
            <view class="mr-16">
                <view v-for="(item, index) in listL" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16" @click="toDetail(item)">
                    <image :src="item.picUrl" class="w-319 b-24" mode="widthFix"></image>
                    <view class="ph-12">
                        <view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
                        <view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.price }} 到手价</view>
                        <view class="fs-22 text-color3 old-price">¥{{ item.originalPrice }}</view>
                        <!-- <view class="mt-17"><view class="fs-22 ph-8 pv-1 top">猫猫主粮TOP1</view></view> -->
                    </view>
                </view>
            </view>
            <view>
                <view v-for="(item, index) in listR" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16" @click="toDetail(item)">
                    <image :src="item.picUrl" class="w-319 b-24" mode="widthFix"></image>
                    <view class="ph-12">
                        <view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
                        <view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.price }} 到手价</view>
                        <view class="fs-22 text-color3 old-price">¥{{ item.originalPrice }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { spuPage } from '@/services/api/shop/index';
const listL = ref<any[]>([]);
const listR = ref<any[]>([]);
getRecommendSpu();
async function getRecommendSpu() {
    const { data } = await spuPage({ pageNo: 1, pageSize: 20, type: 1, sortAsc: true });
    if (data.list.length > 0) {
        data.list.forEach((item: any, index: number) => {
          let list=item.picUrl.split(',')
          item.picUrl=list[0]
            if (index % 2 === 0) {
                listL.value.push(item);
            } else {
                listR.value.push(item);
            }
        });
    }
}
function toMore() {
    uni.navigateTo({
        url: `/pages_shop/recommend`,
    });
}
function toDetail(data: any) {
    uni.navigateTo({
        url: `/pages_shop/productDetails/index?id=${data.id}`,
    });
}
</script>
<style lang="scss" scoped>
.recommend {
    .old-price {
        text-decoration: line-through;
    }
    .box {
        background: #fff;
    }
    .top {
        background: #fff5ed;
        color: #fa7f28;
        display: inline-block;
        border-radius: 4rpx;
    }
}
</style>
